import React, { useState } from 'react';
import NoUiSlider from '../../components/NoUiSlider';
import '../common.css';
import './styles.css';

const RangeSlider = () => {
  const [values, setValues] = useState([20, 80]);

  const handleChange = (values) => {
    setValues(values);
  };

  const handleEnd = (values) => {
    console.log('滑块结束时的值:', values);
    console.log('滑块范围:', {
      min: 0,
      max: 100,
      current: values
    });
  };

  return (
    <div className="range-slider-container">
      <h2>双滑块范围选择示例</h2>
      <div className="slider-wrapper">
        <NoUiSlider
          start={values}
          range={{
            min: 0,
            max: 100
          }}
          connect={[false, true, false]}
          onChange={handleChange}
          onEnd={handleEnd}
          tooltips={true}
        />
        <div className="range-display">
          <div>最小值: {values[0]}</div>
          <div>最大值: {values[1]}</div>
        </div>
      </div>
    </div>
  );
};

export default RangeSlider; 